<template>
  <div class="card-layout-box">
    <div class="layout-left flex-align">
      <img :src="image.zuoye" alt="">
      <div class="another-name">
                          <span class="lable-type">
                            作业
                          </span>
      </div>
    </div>

    <div class="layout-right flex-baseline">
      <div class="layout-right-info">
        <h6 class="info-title">
          title
        </h6>

        <div class="statue-bar">
                            <span>
                              {{ work.endDate }}
                            </span>
          <div class="el-divider el-divider--vertical"/>
          <i style="font-style: normal" v-if="changeToTime(work.endDate) < Date.parse(new Date())">已结束</i>
          <div class="el-divider el-divider--vertical"/>
          <span>{{ work.type === 0 ? '个人作业' : '多人作业' }}</span>
        </div>
        <p class="learning-state">
          <span v-if="work.workState === 0" class="font-color--warning">未提交</span>
          <span v-else>已提交</span>
        </p>
      </div>

      <div class="layout-right-functional">
        <el-button
            :disabled="work.isOverTime === 0"
            class="el-button el-button--primary el-button--small"
            @click="() => {router.push({path: '/main/homework', query: work})}"
        >
          <span>
            提交作业
          </span>
        </el-button>

        <el-button v-if="work.workState === 1" class="el-button el-button--primary el-button--small is-plain">
          <span>已提交</span>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>

import {image} from "../../../../../assets/index.js";
import {useRouter} from "vue-router";
import userStore from "../../../../../stores/user.js";
import {onMounted} from "vue";
const router = useRouter()
const userInfo = userStore()

const emit = defineEmits(['initData'])

const props = defineProps({
  work: Object
})

const changeToTime = (timeStr) => {
  return new Date(timeStr.replace(/-/g,'/')).getTime()
}

onMounted(() => {
  console.log(props.work)
})

</script>

<style scoped>
.card-layout-box {
  width: 100%;
  background: #fff;
  display: flex;
  position: relative;

  .layout-left {
    display: flex;
    flex-direction: column;
    min-width: 85px;
    margin-right: 16px;
    font-size: 12px;

    img {
      height: 40px;
      max-width: 40px;
      margin-bottom: 10px;
    }

    .another-name {
      position: relative;
      margin-top: 5px;
      line-height: 13px;
      display: inline-block;
      width: 85px;
      text-align: center;
      max-height: 31px;
      margin-bottom: 2px;
    }

    .lable-type {
      color: #3c4043;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 65px;
      max-height: 30px;
      line-height: 15px;
      word-break: break-all;
      display: inline-block;
      text-align: center;
    }
  }

  .layout-right {
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: 0 0 4px;
    font-size: 14px;

    .layout-right-info {
      .info-title {
        font-size: 16px;
        margin-bottom: 12px;
        max-width: 500px;
        cursor: pointer;
        color: #212121;
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: normal;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .statue-bar {
        color: #5f6368;
        font-size: 12px;
        font-style: normal;

        .el-divider .el-divider--vertical {
          font-style: normal;
          display: inline-block;
          width: 1px;
          height: 1em;
          margin: 0 8px;
          vertical-align: middle;
          position: relative;
        }
      }

      .learning-state {
        font-size: 12px;
        padding-top: 8px;
      }

      .font-color--warning {
        color: #ff941f;
      }
    }

    .layout-right-functional {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 1;
      font-size: 12px;
    }
  }
}
</style>
